<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-input
          placeholder="请输入姓名"
          v-model="likename"
          clearable>
        </el-input>
      </el-col>
      <el-col :span="5">
        <el-button @click="add(dm=false)" type="primary">添加检查项</el-button>
      </el-col>
    </el-row>
    <template>
      <el-table
        :data="findUsers(likename).slice((pageNun-1)*pageSize,pageNun*pageSize)"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="检查项编码">
        </el-table-column>
        <el-table-column
          prop="name"
          label="检查项名称">
        </el-table-column>
        <el-table-column
          prop="mnemonicName"
          label="检查类型">
          <template slot-scope="scope">
            <el-steps v-if="scope.row.type==1">检验</el-steps>
            <el-steps v-if="scope.row.type==2">检查</el-steps>
          </template>
        </el-table-column>
        <el-table-column
          prop="sex"
          label="适用性别">
          <template slot-scope="scope">
            <el-steps v-if="scope.row.sex==0">男</el-steps>
            <el-steps v-if="scope.row.sex==2">女</el-steps>
          </template>
        </el-table-column>
        <el-table-column
          prop="age"
          label="适用年龄">
        </el-table-column>
        <el-table-column
          prop="price"
          label="检查项价格">
        </el-table-column>
        <el-table-column
          prop="maxck"
          label="参考最大范围">
        </el-table-column>
        <el-table-column
          prop="minck"
          label="参考最小范围">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="up(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="ck(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        :current-page.sync="pageNun"
        :page-sizes="[2,4,6]"
        :page-size='pageSize'
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </template>
    <el-dialog width="100p"  class="dialog dialogAdd" custom-class="custom-dialog"
               :visible.sync="dm" :close-on-click-modal="false">
      <h3>{{mm}}</h3>
      <el-form  label-width="100px" class="demo-dynamic" :rules="rules" :model="froms" ref="ArForm">
      <el-tabs type="border-card">
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查项名称:" prop="name">
            <el-input v-model="froms.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="助记名:" prop="mnemonicName">
            <el-input v-model="froms.mnemonicName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查项编号:">
           <el-input v-model="froms.code" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="适用年龄:" prop="age">
              <el-input v-model="froms.age"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="参考大范围:" prop="maxck">
              <el-input-number v-model="froms.maxck" controls-position="right"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参考小范围:" prop="minck">
              <el-input-number v-model="froms.minck" controls-position="right"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查项价格:" prop="price">
              <el-input v-model="froms.price"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查项所属:" prop="affiliationClassify">
              <el-input v-model="froms.affiliationClassify"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-col :span="12">
              <el-form-item label="性别:" prop="sex">
                <el-select v-model="froms.sex" placeholder="请选择">
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检查项类型:" prop="type">
                <el-select v-model="froms.type" placeholder="请选择">
                  <el-option label="检验" value="1"></el-option>
                  <el-option label="检查" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目说明:" prop="remark">
              <el-input v-model="froms.remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label=" 注意事项:" prop="attention">
              <el-input v-model="froms.attention"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-tabs>
      </el-form>
      <el-button v-show="xx!=null" @click="adds()" type="primary">确认</el-button>
      <el-button v-show="xx!=null" @click="dm=false" type="danger">取消</el-button>
    </el-dialog>
</div>
</template>

<script>
  import {tCheckitemList,tcheckitemup,tcheckitemadd} from '@/api/lgx/inspection'
    export default {
      components: {},
      data() {
        return {
          rules:{
            name: [
              {required: true, validator:(a,b,c)=>{
                  if(this.froms.name==""){
                    c(new Error("检查项名称不能为空"))
                  }else {
                    c()
                  }
                }, trigger: 'blur' }
            ],
            mnemonicName: [
              {required: true, validator:(a,b,c)=>{
                  if(this.froms.mnemonicName==""){
                    c(new Error("助记名不能为空"))
                  }else {
                    c()
                  }
                }, trigger: 'blur' }
            ],
            age: [
              {required: true, validator:(a,b,c)=>{
                  if(this.froms.age==""){
                    c(new Error("年龄不能为空"))
                  }else {
                    c()
                  }
                }, trigger: 'blur' }
            ],
            maxck: [
              {required: true, validator:(a,b,c)=>{
                  if(this.froms.maxck==""){
                    c(new Error("请输入最大参考范围"))
                  }else {
                    c()
                  }
                }, trigger: 'blur' }
            ],
            minck: [
              {required: true, validator:(a,b,c)=>{
                  if(this.froms.minck==""){
                    c(new Error("请输入最小参考范围"))
                  }else {
                    c()
                  }
                }, trigger: 'blur' }
            ],
            price: [
              {required: true, validator:(a,b,c)=>{
                  if(this.froms.price==""){
                    c(new Error("请输入检查项价格"))
                  }else {
                    c()
                  }
                }, trigger: 'blur' }
            ],
            affiliationClassify: [
              {required: true, validator:(a,b,c)=>{
                  if(this.froms.affiliationClassify==""){
                    c(new Error("请输入检查项所属分类"))
                  }else {
                    c()
                  }
                }, trigger: 'blur' }
            ],
            remark: [
              {required: true, validator:(a,b,c)=>{
                  if(this.froms.remark==""){
                    c(new Error("请输入检查项说明"))
                  }else {
                    c()
                  }
                }, trigger: 'blur' }
            ],
            sex: [
              {required: true, validator:(a,b,c)=>{
                  if(this.froms.sex==""){
                    c(new Error("请选择性别"))
                  }else {
                    c()
                  }
                }, trigger: 'blur' }
            ],
            type: [
              {required: true, validator:(a,b,c)=>{
                  if(this.froms.type==""){
                    c(new Error("请选择检查项类型"))
                  }else {
                    c()
                  }
                }, trigger: 'blur' }
            ],
            attention: [
              {required: true, validator:(a,b,c)=>{
                  if(this.froms.attention==""){
                    c(new Error("请输入注意事项"))
                  }else {
                    c()
                  }
                }, trigger: 'blur' }
            ],
          },
          dm: false,
          cx: "",
          mm:"",
          xx: null,
          fileList: [],
          likename: "",
          pageSize: 4,
          pageNun: 1,
          total: 5,
          routerList: [],
          froms:{
            id:"",
            code:"",
            name:"",
            mnemonicName:"",
            sex:"",
            age:"",
            price:"",
            affiliationClassify:"",
            type:"",
            remark:"",
            attention:"",
            createtime:"",
            updatetime:"",
            minck:"",
            maxck:""
          }
        }
      }, methods: {
        handleSizeChange(val) {
          this.pageSize = val
        }, findUsers(likename) {
          //包含includes的意思
          return this.routerList.filter((item, i) => {
            if (item.name.includes(likename)) {
              return item;
            }
          });
        },
        ck(row){
          this.xx=null
          this.mm="查看检查项"
          this.dm=true;
          this.froms.id=row.id
          this.froms.code=row.code
          this.froms.name=row.name
          this.froms.age=row.age
          this.froms.sex=row.sex
          this.froms.mnemonicName=row.mnemonicName
          this.froms.price=row.price
          this.froms.affiliationClassify=row.affiliationClassify
          this.froms.type=row.type
          this.froms.remark=row.remark
          this.froms.attention=row.attention
          this.froms.createtime=row.createtime
          this.froms.updatetime=row.updatetime
          this.froms.minck=row.minck
          this.froms.maxck=row.maxck
        },
        up(row){
          this.mm="修改检查项"
          this.xx=1
          this.dm=true;
          this.froms.id=row.id
          this.froms.code=row.code
          this.froms.name=row.name
          this.froms.age=row.age
          this.froms.sex=row.sex
          this.froms.mnemonicName=row.mnemonicName
          this.froms.price=row.price
          this.froms.affiliationClassify=row.affiliationClassify
          this.froms.type=row.type
          this.froms.remark=row.remark
          this.froms.attention=row.attention
          this.froms.createtime=row.createtime
          this.froms.updatetime=row.updatetime
          this.froms.minck=row.minck
          this.froms.maxck=row.maxck
        },
        adds(){
          this.$refs['ArForm'].validate(valid => {
            if (valid) {
              this.dm=false;
              if(this.froms.id!=""){
                tcheckitemup(this.froms).then(response=>{
                  if(response.data==1){
                    this.$message({
                      message: '修改成功!',
                      type: 'success'
                    });
                    this.sx()
                  }
                })
              }
              if(this.froms.id==""){
                tcheckitemadd(this.froms).then(response=>{
                  if(response.data==1){
                    this.$message({
                      message: '添加成功!',
                      type: 'success'
                    });
                    this.sx()
                  }
                })
              }
            } else {
              this.$message.error('请填完所要填完的信息');
            }
          })
        },
        add(){
          this.mm="添加检查项"
          this.xx=1
          this.dm=true;
          this.froms.id=""
          this.froms.code=Math.floor(Math.random() * 10000)
          this.froms.name=""
          this.froms.age=""
          this.froms.sex=""
          this.froms.mnemonicName=""
          this.froms.price=""
          this.froms.affiliationClassify=""
          this.froms.type=""
          this.froms.remark=""
          this.froms.attention=""
          this.froms.createtime=""
          this.froms.updatetime=""
          this.froms.minck=""
          this.froms.maxck=""
        },
        sx(){
          tCheckitemList().then(response=>{
            this.routerList = response.data;
            this.total = response.data.length
          })
        }
      },created() {
        tCheckitemList().then(response=>{
          this.routerList = response.data;
          this.total = response.data.length
        })
      }
    }
</script>

<style scoped>

</style>
